<!--退款维权-->
<template>
  <div class="order-refund-wrap clear">
    <el-menu  >
      <h2 class="h1">退款维权</h2>
    </el-menu>
    <!--  输入框区域-->
    <div class="order-refund-input clear">
      <div class="order-refund-input-box clear">
        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
          <el-form-item label="订单编号:">
            <el-input v-model="formInline.id"></el-input>
          </el-form-item>
        </el-form>
        <el-form  :model="formInline" ref="formInline" class="demo-form-inline">
        <el-form-item label="申请时间：" >
          <el-date-picker
              v-model="formInline.from"
              type="date"
              placeholder="开始时间">
          </el-date-picker>
          <span> 至 </span>
          <el-date-picker
              v-model="formInline.to"
              type="date"
              placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        </el-form>
        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
          <el-form-item label="商品名称:">
            <el-input v-model="formInline.user"></el-input>
          </el-form-item>
          <el-form-item label="退款类型:"  class="order-refund-input-box-right-common">
            <el-select v-model="formInline.type" placeholder="全部">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>

        </el-form>

        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
          <el-form-item label="退款方式:">
            <el-select v-model="formInline.refWay" placeholder="请选择">
              <el-option label="微信" value="weixin"></el-option>
              <el-option label="支付宝" value="zhifubao"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="退款状态:"  class="order-refund-input-box-right-common">
            <el-select v-model="formInline.refStatus" placeholder="全部">
              <el-option label="退款" value=0></el-option>
              <el-option label="退款中" value=1></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" style="margin-left: 72px">
          <el-form-item >
            <el-button type="primary" @click="onSubmit">筛选</el-button>
            <el-button>批量导出</el-button>
            <el-button>查看已生成报表</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!--tab切换列表区域-->
    <div class="order-refund-tab">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="全部"></el-tab-pane>
        <el-tab-pane label="退款处理中" name=0></el-tab-pane>
        <el-tab-pane label="退款成功" name=1></el-tab-pane>
<!--        <el-tab-pane label="退款关闭" name="norefund"></el-tab-pane>-->
      </el-tabs>
    </div>

    <!--  列表数据-->
    <div class="order-refund-list">

      <el-table
          :data="showData"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="退款订单编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="refWay"
            label="退款方式"
            width="180">
        </el-table-column>
        <el-table-column
            prop="startTime"
            label="申请时间">
        </el-table-column>
        <el-table-column
            prop="endTime"
            label="退款时间">
        </el-table-column>
        <el-table-column
            prop="money"
            label="退款金额">
        </el-table-column>
        <el-table-column
            prop="refStatus"
            label="退款状态">
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <router-link  :to="{path: '/orderdetails', query: {id: scope.row.id}}">查看</router-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="order-pagination clear">
        <el-pagination
            background
            layout="prev, pager, next"
            @current-change="handlePageChange"
            :total="total"
            :current-page="currentPage"
            :page-size="limit"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>


import {getRefundOrder, getRefundSelectOrder} from "@/http/orderService";

export default {
  name: "OrderRefund",
  data() {
    return {
      formInline: {
        id: '',
        from: '',
        to: '',
        refWay: '',
        refStatus: '',
        region: '',
      },
      from: '',
      to: '',
      tableData:[],
      showData:[],
      activeName:'全部',

      options:[5,10,15],
      currentPage: 1,//当前页
      total:0,//总数
      limit:5,//每页显示数量
    }
  },

  created() {
    this.init();
  },

  methods:{
    //全部退款订单
    init() {
      getRefundOrder({
        "page":this.currentPage + "",
        "limit":"5"
      })
          .then((res) => {
            this.tableData = res.data.data
            this.showData = res.data.data;
            this.total = Number(res.data.count);
            console.log( this.total)
          })
          .catch((err) => {
            console.log(err)
          })
    },


    handleClick:function (tab) {
      if(tab.name === "全部"){
        this.showData = this.tableData
      }else {
        this.showData = this.tableData.filter(item => item.refStatus === tab.name)

      }
    },
    //筛选
    onSubmit(){
      console.log("form", this.$refs.formInline.model);
      getRefundSelectOrder({
        "id":this.$refs.formInline.model.id,
        "refWay":this.$refs.formInline.model.refWay,
        "from":this.$refs.formInline.model.from,
        "to":this.$refs.formInline.model.to,
        "page":"1",
        "limit":"4"
      })
          .then((res) => {
            this.tableData = res.data.data
            this.showData = res.data.data;
            this.total = Number(res.data.count);
          })
          .catch((err) => {
            console.log(err)
          })
    },
    //分页
    // 现在显示当前页的第几页
    handlePageChange(current) {
      this.currentPage=current
      console.log("当前页面",this.currentPage);
      this.init();
      this.handleClick(this.tab)
    },

  }

}
</script>

<style lang="scss" scoped>
.h1{
  padding: 0 15px 20px;
  font-weight: 200;
}
.order-refund-wrap {
  background-color: #fff;
  padding: 30px;
  .order-refund-input {
    background-color: #F3F3F3;
    padding: 15px;
    .order-refund-input-box-right-common {
      margin-left: 40px;
    }
  }
  .order-refund-tab {
    padding: 15px 0 -1px;
  }
}

  .order-pagination {
    margin-top: 10px;
    text-align: right;
  }
.demo-form-inline {
  text-align: left;
}
</style>